<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="static/css/index.css">
<link rel="stylesheet" href="static/css/xcConfirm.css">
<link rel="stylesheet" href="static/font/css/font-awesome.min.css">

<script type="text/javascript" src="static/easyui/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/js/xcConfirm.js" charset="utf-8"></script>
<style type="text/css">
	#head{
		width: 100%;
		height: 100px;
		background: #daf2fd;
	}
	.yzy_font{
			position: absolute;
			margin-left: -150px;
			background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
			-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
			-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */ 
			-webkit-background-size: 200% 100%; 
			-webkit-animation: masked-animation 4s linear infinite; font-size: 35px;
			margin-left: 20px;
			line-height: 100px;
		}
		.yay_font_one{
			font-family: 楷体;
			
			text-shadow:5px 10px 6px #000;
		}
		@keyframes masked-animation {
		    0% {
		        background-position: 0  0;
		    }
		    100% {
		        background-position: -100%  0;
		    }
		}
		.yzy_font_two{
			float:right ;
			margin-right:50px;
			line-height: 100px;
			
			color:  #000;
		}
		.yzy_font_two:hover{
			background: #aed0ea;
			cursor: pointer;
		}
</style>
<div id="head">
	<font class="fa fa-leanpub fa-3x yzy_font">&nbsp;<font class="yay_font_one">图书管理系统</font></font>
	<a href="login"><div>
		<font class="yzy_font_two">
			  <i  style="margin-left: 30px;margin-right:30px; " class="fa fa-user-secret">&emsp;登录</i>
		</font>
	</div></a>
</div>
</head>
<body>
	<div style="width: 100%;height: 100%;">
			<div class="div1" th:each="r:${books}">
				<img th:src="@{/admin/book/download(id=${r.id})}" style="height: 100%;width: 33%;"/>
				<div class="div2">
					<div>
						<p class="bookname" style="" th:text="${r.name}">java从入门到精通</p>
						<span class="bookuser">作者：<font class="book" th:text="${r.author}"></font></span>
						<span>出版社：<font class="book" th:text="${r.press}">某某某出版社</font></span>
					</div>
					
					<div th:if="${r.state>0}" class="hi" onclick="jieshu(this.id,this.title)" th:id="${r.id}"  th:title="${r.name}">
						<font style="color: #FFFFFF;">点击借书</font>
					</div>
					<div th:if="${r.state<1}" class="hino">
						<font style="color: #fff;" title="可能是没有这本图书，也可能已被借出！">图书无法借阅</font>
					</div>
				</div>
			</div>
		</div>
	<script type="text/javascript">
		function jieshu(value,name){
			$.post('CheckCode', function(data){
	    		if(data){
	    			
	    			var txt=  "您正在请求借阅《"+name+"》<br>图书君提示您：请保管好图书哦。";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm,undefined,value);
	    		}else{
	    			var txt=  "请先登录";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm);
	    		}
	    	});
		}
	</script>
</body>
</html>